<div class="accessory-box" [ngClass]="{ 'accessory-on': service.values.CarbonDioxideDetected }">
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.carbon_dioxide_sensor' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- outer casing -->
        <rect x="1" y="1" width="30" height="12" rx="1" stroke="#7f7f7f" fill="none" stroke-width="1.25" />
        <!-- alarm type -->
        <text
          class="type"
          text-anchor="middle"
          dominant-baseline="middle"
          font-family="Arial"
          font-size="7.5"
          x="16"
          y="7.7"
          fill="#7f7f7f"
          stroke-width="0.6"
          font-weight="900"
        >
          CO2
        </text>
        <!-- grille blue background -->
        <line x1="6" y1="14.5" x2="25.5" y2="14.5" stroke="#1976d2" stroke-opacity="0.5" stroke-width="2" />
        <!-- grille vertical lines -->
        <line stroke-linecap="round" x1="5" y1="13" x2="6.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
        <line stroke-linecap="round" x1="11" y1="13" x2="11" y2="16" stroke="#7f7f7f" stroke-width="1" />
        <line stroke-linecap="round" x1="15.5" y1="13" x2="15.5" y2="16" stroke="#7f7f7f" stroke-width="1" />
        <line stroke-linecap="round" x1="20" y1="13" x2="20" y2="16" stroke="#7f7f7f" stroke-width="1" />
        <line stroke-linecap="round" x1="26" y1="13" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
        <!-- grille horizontal lines -->
        <line stroke-linecap="round" x1="6.5" y1="16" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
        <!-- top wave -->
        <path
          d="M3,24.0706147 C3.28945166,24.8007217 5.978098,25.1773883 10.0660175,25.2006147 C12.5085124,25.2144929 18.5053297,22.8514837 22.4060749,22.1943647 C24.1588716,21.898084 26.5955382,22.1756219 28.716875,23.0221772"
          class="air-line"
          stroke="#7f7f7f"
          fill="transparent"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <!-- bottom wave -->
        <path
          d="M3,30.0706147 C3.28945166,30.8007217 5.978098,31.1773883 10.0660175,31.2006147 C12.5085124,31.2144929 18.5053297,28.8514837 22.4060749,28.1943647 C24.1588716,27.898084 26.5955382,28.1756219 28.716875,29.0221772"
          class="air-line"
          stroke="#7f7f7f"
          fill="transparent"
          stroke-width="1.5"
          stroke-linecap="round"
        />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    @if (service.values.CarbonDioxideDetected) {
    <div class="accessory-label red-text">{{ 'accessories.control.detected' | translate }}</div>
    } @else {
    <div class="accessory-label grey-text">{{ 'accessories.control.not_detected' | translate }}</div>
    }
  </div>
</div>
